<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>{$shareTitle}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet" type="text/css">
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/zepto.fullpage.css{$Think.config.RESOURCE_VER}" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.fullpage.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
<script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <style>
        img{
            max-width:100%;
            position: relative;
            top: 50%;
            transform: translate(0,-50%);
            -webkit-transform: translate(0,-50%);
        }
        .wp{
            overflow: hidden;
        }
        .wp-inner,.page{
            height:100%;
            font-size:0;
            text-align:center;
        }
        .footer{
            position:fixed;
            bottom:0;
            height:50px;
            line-height:50px;
            font-size:15px;
            color:#313131;
            background-color: white;
            width: 100%;
            display:-webkit-box;
            -webkit-box-pack: justify;
            padding: 10px;
            box-sizing: border-box;
        }
        .footer .btn{
            background-color: #FF8F12;
            height: 33px;
            line-height: 33px;
            color: white;
            border-radius: 4px;
            padding: 0 10px;
            box-sizing: border-box;
        }
        .footer .text{
            line-height: 30px;
            overflow: hidden;
            margin-right:20px;
            text-overflow: ellipsis;
            width: -webkit-calc(100% - 100px);
            white-space: nowrap;
        }
        .iconup{
            width: 40px;
            height: 40px;
            position: relative;
            bottom: 60px;
            left: 50%;
            -webkit-transform: translate(-50%,0);
            animation:up 1s infinite ease;
            -webkit-animation:up 1s infinite ease; /* Safari and Chrome */
        }
        @keyframes up
        {
            from {transform:translate(-50%,0);opacity: 1;}
            to {transform:translate(-50%,-20px);opacity: 0;}
        }
        @-webkit-keyframes up
        {
            from {bottom:60px;opacity: 1;}
            to {bottom:80px;opacity: 0;}
        }
    </style>
</head>
<body>
<div class="wp">
    <div class="wp-inner">
        <volist name="joinContent" id="pic">
          <div class="page page{$i}"><img src="{$pic.picUrl}" /></div>
        </volist>
    </div>
</div>
<script type="text/javascript">
    $(".wp").height($(window).height()-50);
    $('.wp-inner').fullpage({
        change: function (e) {
            // 移除动画属性
            $('.js-animate').each(function() {
                $(this).removeClass($(this).data('animate'));
            });
        },
        afterChange: function (e) {
            // 添加动画属性
            $('.page').eq(e.cur).find('.js-animate')
                    .each(function () {
                        $(this).addClass($(this).data('animate'));
                    });
        },
        duration:100,
        loop:false
    });
</script>
<img class="iconup" src="{$Think.config.RESOURCEURL}wx_assets/quan/img/iconup.png{$Think.config.RESOURCE_VER}"/>
<div class="footer">
    <div class="text">{$payContent}</div>
    <div class="btn" id="join-now">立即加入</div>
</div>

<script type="text/javascript">
    var baseUrl = '{$Think.config.SERVER_HOST}';
    var hrefPath = "call.html?customerId={$customerId}";
    var index={
        init:function(){
            var me=this;
            this._initEvent();
            this._initAlert();
        },
        _initEvent:function(){
            $("#join-now").click(function(){
                var p = $.util.getParamAsObject();
                p=encodeURIComponent(JSON.stringify(p));
                location.href = baseUrl+'call.html?customerId={$customerId}&module=quan&method=mireg&params='+p;
            })
        },
        _initAlert:function(){
          var satisfy = "{$satisfy}";
            if(satisfy==1){
                $.util.showMsg("哇哦，恭喜您！您已经满足我们的加入条件，点击下方“立即加入”按钮，注册完成即可成功加入！");
            }
        },
        getShareUrl:function(){
            var shareUrl="";
            var p = $.util.getParamAsObject();
            var params=encodeURIComponent(JSON.stringify(p));
            shareUrl=baseUrl+'call.html?customerId={$customerId}&module=quan&join=1&method=index&params='+params;
            return shareUrl;
        }
    }
    index.init();
    var shareUrl=index.getShareUrl();
    wx_share.init({
        "title":"{$shareTitle}",
        "desc":'{$description}',
        "link":shareUrl,
        "imgUrl":"{$shareImg}",
        "pkg":{
            "appId": '{$pkg.appId}',
            "timestamp": '{$pkg.timestamp}',
            "nonceStr": '{$pkg.nonceStr}',
            "signature": '{$pkg.signature}'
        },
        success:function(config,shareType){
                
        }
    });
</script>
</body>
</html>